<template>
  <div id="search">
    <div class="box">
      <div class="box-margin">
      <i class="iconfont icon-bofang" @click="question"> </i>
    <input type="texe" placeholder="搜索歌曲、歌手、专辑" @input="Null" v-model="inpValue" @keyup.enter="question"  />
     <i class="iconfont icon-guanbi" @click="del"> </i>
</div>
    </div>
    <!-- 初始化页面 -->
    <div class="hotSearch" v-show="isBlock">
      <p>热门搜索</p>
      <abc :hotArr="hotArr" :abc='abc' @just="just" @sou="sou"></abc>
    </div>
    <ask v-show="isHidden" :inpValue='inpValue' :searchArr="searchArr" @keyword="keyword"></ask>
    
    <hang :search="dataArr" v-show="Block">
      <template v-slot:aa></template>
    
      
    </hang>
    <load v-show="isLoading" ></load>
  </div>
</template>

<script>
import hang from "../../components/Hang.vue";
import abc from "../../components/Abc.vue";
import ask from "../../components/Request.vue";
import load from "../../components/Loading.vue";
export default {
  data:()=>{
    return {
        // 初始化页面
      isBlock:true,
      //歌曲渲染
      Block:false,
      // 搜索渲染
      isHidden:false,
      //等待页面
      isLoading:false,
      inpValue:"",
      dataArr:[],
      hotArr:[],
      abc:JSON.parse(localStorage.getItem("abc"))||[],
      searchArr:[],
      timer:undefined,
    }
  },
  methods:{
    //请求搜索数据
    async question(){
      if(this.inpValue){
        this.dataArr=[]
        //  this.isHidden=false;
      this.isBlock=false;
      this.Block=true;
      this.isHidden=false;
      this.abc.push(this.inpValue);
      console.log(this.abc);
      let res = await this._axios.get(`/cloudsearch?keywords=${this.inpValue}`);
      this.dataArr=res.data.result.songs;
      console.log(this.dataArr);
      }

    },

//动态搜索关键词
   async keyword(word){
      this.dataArr=[]
      this.inpValue=word;
        this.Block=true;
        this.isBlock=false;
        this.isHidden=false;
         this.abc.push(this.inpValue);
         
         let res = await this._axios.get(`/cloudsearch?keywords=${this.inpValue}`);
      this.dataArr=res.data.result.songs
    },
    //点击热搜词发送请求渲染
    async just(value){
      this.inpValue=value;
      if(this.inpValue){
         this.dataArr=[]
        this.Block=true;
        this.isBlock=false;
        this.abc.push(this.inpValue);
        let res = await this._axios.get(`/cloudsearch?keywords=${this.inpValue}`);
        this.dataArr=res.data.result.songs
      }
   },
   //点击搜索历史记录时发送请求
 async sou(item){
 this.inpValue=item
  if(this.inpValue){
     this.dataArr=[]
        this.Block=true;
        this.isBlock=false;
         this.abc.push(this.inpValue);
         let res = await this._axios.get(`/cloudsearch?keywords=${this.inpValue}`);
      this.dataArr=res.data.result.songs;
     
      // console.log(this.dataArr, 999999);
      }
},
    //搜索框旁白的删除键
    del(){
      this.inpValue="";
       this.dataArr=[]
        this.isBlock=true;
          this.Block=false;
            this.isHidden=false;
    },
    //当输入框为空时,回到初始化页面
    //根据内容发送请求
   async Null(){
    
      if(!this.inpValue){
        
         this.isBlock=true;
          this.Block=false;
          this.isHidden=false;
      }
      else{
         this.dataArr=[]
        return function(t){
           
          clearTimeout(t.timer)
          t.timer=setTimeout(async function(){ 
         
        let res = await t._axios.get(`/cloudsearch?keywords=${t.inpValue}`);
        t.searchArr=res.data.result.songs;
        t.isBlock=false;
        t.Block=false;
        t.isHidden=true;
         t.isLoading = false;
      }, 300);
        }(this);
}
    },

    },
   
  async mounted (){
     //请求热门搜索数据
      let res = await this._axios.get('/search/hot');
      this.hotArr=res.data.result.hots
      console.log(this.hotArr);
    },
components:{
  hang,
  abc,
  ask,
  load
  },
  watch:{
    abc:function () {
      localStorage.setItem("abc",JSON.stringify(this.abc));
    },
  dataArr:{
    handler(newVal, oldVal) {
      console.log(newVal.length, oldVal.length);
      if(oldVal.length == 0 && this.inpValue!='') {
          this.isLoading=true;
          this.isBlock=false;
          this.isHidden=false;
          this.Block=false;
      } 

      if(newVal.length > 0) {
        this.isLoading=false;
          this.isBlock=false;
          this.isHidden=false;
          this.Block=true;
      }
    },

    // immediate:true
    // deep:true



  }
    }
   
}

</script>




<style lang="scss" scoped>
#search{
 margin-top: _vw(224);
  display: flex;
  flex-direction: column;
align-items:center;
  .box{
    display: flex;
    justify-content:center;
    align-items: center;
    width: _vw(750.66);
    height: _vw(120);
    padding: _v(15) _vw(10);
  //  background-color: pink;
   border-bottom: 1px  solid rgba(235,236,236);
  .box-margin{
   display: flex;
    justify-content:center;
    align-items: center;
    width: _vw(590.66);
    height: _vw(60);
    padding:0 _vw(30);
     background-color:rgba(235,236,236);
     border-radius:_vw(30);
    i{
       width: _vw(60);
      height: _vw(60);
      line-height: _vw(60);
      text-align: center;
      color:rgba(203,203,204)
    }
    input{
       width: _vw(700);
      height: _vw(60);
      background-color:rgba(235,236,236);
      border:none;
      outline: none;
      margin: 0;
    //  color:rgba(235,236,236);
    } 
  
}
  }
  .hotSearch{
      width: 100%;
      p{
        margin-left:  _vw(30);
         margin-top:  _vw(15);
      height: _vw(24);
      // background-color: grey;
      }

    }
  
}
   


</style>